import React, { Component } from 'react'
import ReactDom from 'react-dom'

// 类式组件
// class Demo extends Component {
  
//   state = { count: 0}
//   myRef = React.createRef()

//   add = () => {
//     this.setState(state => ({count: state.count+1}))
//   }

//   unmount = () => {
//     ReactDom.unmountComponentAtNode(document.getElementById('root'))
//   }

//   show = () => {
//     alert(this.myRef.current.value)
//   }

//   componentDidMount () {
//     this.timer = setInterval(() => {
//       console.log(this.state.count)
//       this.setState( state => ({count: state.count+1}))
//     }, 1000);
//   }

//   componentWillUnmount () {
//     clearInterval(this.timer)
//   }

//   render() {
//     return (
//       <div>
//         <input type="text"  ref={this.myRef}/>
//         <h2>当前和为{this.state.count}</h2>
//         <button onClick={this.add}>点我+1</button>
//         <button onClick={this.unmount}>卸载组件</button>
//         <button onClick={this.show}>点击提示数据</button>
//       </div>
//     )
//   }
// }


// 函数式组件
function Demo () {
  const [count, setCount] = React.useState(0)
  const myRef = React.useRef()

  // 加的回调
  function add () {
    setCount(count+1)
    // setCount(count => count+1)
  }

  // 卸载组件的回调
  function unmount () {
    ReactDom.unmountComponentAtNode(document.getElementById('root'))
  }

  // 函数式组件中代替卸载生命周期的方式useEffect
  React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count+1)
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  // 提示数据的回调
  function show () {
    alert(myRef.current.value)
  }

  return (
    <div>
      <input type="text"  ref={myRef}/>
      <h2>当前和为{count}</h2>
      <button onClick={add}>点我+1</button>
      <button onClick={unmount}>卸载组件</button>
      <button onClick={show}>点击提示数据</button>
    </div>
  )
}

export default Demo